<!DOCTYPE html>
<html lang="java">
<head>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" crossorigin="anonymous">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
            background-color: #f8f9fa;
            padding-top: 60px;
        }
        .login-form {
            width: 100%;
            max-width: 400px;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            margin-top: 20px;
        }
        .role-select {
            margin-bottom: 15px;
        }
        /*.error-message {*/
        /*    color: red;*/
        /*    font-size: 0.9em;*/
        /*    margin-top: 3px;*/
        /*}*/
    </style>
</head>
<body>
<form id="loginForm" class="login-form" action="/loginValidate" method="post">
    <div class="form-group">
        <label for="usernameInput">用户名</label>
        <input type="text" class="form-control" name="username" id="usernameInput" required>
<!--        <div id="usernameError" class="error-message"></div>-->
    </div>
    <div class="form-group">
        <label for="passwordInput">密码</label>
        <input type="password" name="password" class="form-control" id="passwordInput">
<!--        <div id="passwordError" class="error-message"></div>-->
    </div>
    <div class="form-group role-select">
        <label for="roleSelect">身份</label>
        <select class="form-control" id="roleSelect" name="role" required>
            <option value="">-- 请选择身份 --</option>
            <option value="1">管理员</option>
            <option value="2">教师</option>
            <option value="3">学生</option>
        </select>
<!--        <div id="roleError" class="error-message"></div>-->
    </div>
    <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="rememberCheck">
        <label class="form-check-label" for="rememberCheck">记住我</label>
    </div>
    <button type="submit" class="btn btn-primary btn-block">登录</button>
</form>

<script src="/bootstrap/js/jquery.js" crossorigin="anonymous"></script>
<script src="/bootstrap/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

</body>
</html>

<!--<!DOCTYPE html>-->
<!--<html lang="java" xmlns:th="http://www.thymeleaf.org">-->
<!--<head>-->
<!--    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" crossorigin="anonymous">-->
<!--    <style>-->
<!--        body {-->
<!--            display: flex;-->
<!--            justify-content: center;-->
<!--            align-items: flex-start;-->
<!--            min-height: 100vh;-->
<!--            background-color: #f8f9fa;-->
<!--            padding-top: 60px;-->
<!--        }-->
<!--        .login-form {-->
<!--            width: 100%;-->
<!--            max-width: 400px;-->
<!--            padding: 20px;-->
<!--            background: white;-->
<!--            border-radius: 8px;-->
<!--            box-shadow: 0 0 10px rgba(0,0,0,0.1);-->
<!--            margin-top: 20px;-->
<!--        }-->
<!--        .role-select {-->
<!--            margin-bottom: 15px;-->
<!--        }-->
<!--        .error-message {-->
<!--            color: red;-->
<!--            font-size: 0.9em;-->
<!--            margin-top: 3px;-->
<!--            height: 18px;-->
<!--        }-->
<!--        .is-invalid {-->
<!--            border-color: #dc3545;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<form id="loginForm" class="login-form" action="/loginValidate" method="post">-->
<!--    <div class="form-group">-->
<!--        <label for="usernameInput">用户名</label>-->
<!--        <input type="text" class="form-control" name="username" id="usernameInput"-->
<!--               th:classappend="${usernameError != null} ? 'is-invalid' : ''"-->
<!--               th:value="${param.username}">-->
<!--        <div id="usernameError" class="error-message" th:text="${usernameError}"></div>-->
<!--    </div>-->
<!--    <div class="form-group">-->
<!--        <label for="passwordInput">密码</label>-->
<!--        <input type="password" name="password" class="form-control" id="passwordInput"-->
<!--               th:classappend="${passwordError != null} ? 'is-invalid' : ''">-->
<!--        <div id="passwordError" class="error-message" th:text="${passwordError}"></div>-->
<!--    </div>-->
<!--    <div class="form-group role-select">-->
<!--        <label for="roleSelect">身份</label>-->
<!--        <select class="form-control" id="roleSelect" name="role"-->
<!--                th:classappend="${roleError != null} ? 'is-invalid' : ''">-->
<!--            <option value="">&#45;&#45; 请选择身份 &#45;&#45;</option>-->
<!--            <option value="1" th:selected="${param.role == '1'}">管理员</option>-->
<!--            <option value="2" th:selected="${param.role == '2'}">教师</option>-->
<!--            <option value="3" th:selected="${param.role == '3'}">学生</option>-->
<!--        </select>-->
<!--        <div id="roleError" class="error-message" th:text="${roleError}"></div>-->
<!--    </div>-->
<!--    <div class="form-group form-check">-->
<!--        <input type="checkbox" class="form-check-input" id="rememberCheck">-->
<!--        <label class="form-check-label" for="rememberCheck">记住我</label>-->
<!--    </div>-->
<!--    <button type="submit" class="btn btn-primary btn-block">登录</button>-->
<!--</form>-->

<!--<script src="/bootstrap/js/jquery.js" crossorigin="anonymous"></script>-->
<!--<script src="/bootstrap/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>-->

<!--<script>-->
<!--    // Client-side validation-->
<!--    document.getElementById('loginForm').addEventListener('submit', function(e) {-->
<!--        let isValid = true;-->

<!--        // Validate username-->
<!--        const username = document.getElementById('usernameInput').value.trim();-->
<!--        if (!username) {-->
<!--            document.getElementById('usernameError').textContent = '请输入用户名';-->
<!--            document.getElementById('usernameInput').classList.add('is-invalid');-->
<!--            isValid = false;-->
<!--        } else {-->
<!--            document.getElementById('usernameError').textContent = '';-->
<!--            document.getElementById('usernameInput').classList.remove('is-invalid');-->
<!--        }-->

<!--        // Validate password-->
<!--        const password = document.getElementById('passwordInput').value.trim();-->
<!--        if (!password) {-->
<!--            document.getElementById('passwordError').textContent = '请输入密码';-->
<!--            document.getElementById('passwordInput').classList.add('is-invalid');-->
<!--            isValid = false;-->
<!--        } else {-->
<!--            document.getElementById('passwordError').textContent = '';-->
<!--            document.getElementById('passwordInput').classList.remove('is-invalid');-->
<!--        }-->

<!--        // Validate role-->
<!--        const role = document.getElementById('roleSelect').value;-->
<!--        if (!role) {-->
<!--            document.getElementById('roleError').textContent = '请选择身份';-->
<!--            document.getElementById('roleSelect').classList.add('is-invalid');-->
<!--            isValid = false;-->
<!--        } else {-->
<!--            document.getElementById('roleError').textContent = '';-->
<!--            document.getElementById('roleSelect').classList.remove('is-invalid');-->
<!--        }-->

<!--        if (!isValid) {-->
<!--            e.preventDefault();-->
<!--        }-->
<!--    });-->
<!--</script>-->
<!--</body>-->
<!--</html>-->